<template>
    <el-container>
        <el-aside width="15%">
            <div class="menu">
                <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#afc5e2" text-color="#fff"
                    @select="changeSidebar" active-text-color="#ffd04b">
                    <el-menu-item index="image">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">图片管理</span>
                    </el-menu-item>
                    <el-menu-item index="wuliu">
                        <i class="el-icon-s-claim"></i>
                        <span slot="title">物流线路管理</span>
                    </el-menu-item>
                    <el-menu-item index="about">
                        <i class="el-icon-s-shop"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-aside>
        <el-container>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
 
<script>
export default {
    data() {
        return {

        }
    },



    mounted() {
        console.log(this.$router.name)
        this.sidebarItem = this.$route.name;

    },
    methods: {
        changeSidebar(path) {
            console.log(path)
            this.$router.push(path);
        },
    }

}
</script>
 
 
<style scoped>
.menu {
    height: 1230px;
    background-color: #afc5e2;
}

.el-header {
    background-color: #afc5e2;
    color: #333;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
}

.el-aside {

    color: #333;
    text-align: center;
    line-height: 900px;
}

.el-main {
    background-color: #cfebe43f;
    color: #333;
    /* text-align: center; */
    line-height: 160px;
    padding: 0px ! important;
}
</style>